<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息部分</title>
    <script src="static/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="fontawesome/css/all.css">
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <link rel="stylesheet" href="static/css/bootoast.css">
    <script src="js/index.js"></script>
    <script src="static/js/bootstrap.js"></script>
    <script src="js/bootoast.js"></script>
    <script>
        $(function () {
            let adminHome = new AdminHome();
            // 初始化模态框
            adminHome.initModal();
        })

        class AdminHome {
            constructor() {
            }

            initModal() {
                // 处理修改模态框
                $('#myModal').on('show.bs.modal', function (event) {
                    // 获取修改按钮
                    let button = $(event.relatedTarget)
                    // 接收传递的数据
                    let userId = button.data('userid');
                    let nickName = button.data('nickname');
                    let sex = button.data('sex');
                    let phone = button.data('phone');
                    let specialty = button.data('specialty');
                    console.log(`userId=${userId}&nickName=${nickName}&sex=${sex}&phone=${phone}&specialty=${specialty}`);
                    var modal = $(this)
                    // 绑定数据
                    modal.find('.modal-body #userId').val(userId)
                    modal.find('.modal-body #nickName').val(nickName)
                    modal.find('.modal-body #phone').val(phone)
                    modal.find(`.modal-body #specialty option[value=${specialty}]`).attr("selected", true);
                    // 处理性别
                    modal.find(`.modal-body input[name=sex][value=${sex}]`).attr("checked", true);
                    // 处理职称
                })
                $('#myModal2').on('shown.bs.modal', function (event) {
                    // 获取修改按钮
                    let button = $(event.relatedTarget)
                    // 接收传递的数据
                    let userId = button.data('userid');
                    let specialty = button.data('specialty');
                    var modal = $(this)
                    // 绑定数据
                    modal.find('.modal-body #userId2').val(userId);
                    modal.find('.modal-body #specialty1').val(specialty)
                })
            }
        }
    </script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            position: relative;
            font-size: 5px;
        }

        .my-container {
            height: 100%;
        }

        .footer {
            position: absolute;
            right: 100px;
            color: #666;
        }

        .anniu {
            box-shadow: 2px 2px black;
        }

        .cz {
            font-size: 20px;
            font-weight: bold;
        }

        .tab {
            /*height: 430px;*/
            margin-top: 10px;
        }

        .tb1 {
            margin-top: 5px;
            /*background-color: #761c19;*/
        }

        .th {
            height: 5px;
        }
        /*#mytable{*/
        /*    */
        /*}*/
        tr {
            height: 15px;
        }

        .modal-content {
            background-color: #edf1ed;
        }

        .table th, .table td {
            text-align: center;
        }

        .table td {
            display: table-cell !important;
            vertical-align: middle !important;
        }

        .myclassname {
            width: 200px;
            text-align: center;
        }
        #mytable th{
            padding: 15px 0;
        }
        #mytable td{
            padding: 15px 0;
        }
    </style>
    <script>
        $(function () {
            bb();
        })

        function bb() {
            var str = document.getElementById('institute');
            var number = document.getElementById('showinstitute');
            var active = document.getElementById('active');
            if (str.value == 1) {
                number.innerHTML = "电信学院";
                active.innerHTML = "学生列表";
            } else if (str.value == 2) {
                number.innerHTML = "会计学院";
                active.innerHTML = "学生列表";
            } else {
                number.innerHTML = "经贸学院";
                active.innerHTML = "学生列表";
            }
        }

        function message(userId) {
            //var mytable = document.getElementById("mytable")
            //mytable.remove()
            $.ajax({
                type: 'post',// 提交方式 post
                url: '/welcome/message/people?userId=' + userId,//
                cache: false,// 不启用缓存
                dataType: 'json',// 期望服务器响应的数据类型 json
                success: function (res) {
                    $("#table-body").empty();
                    console.log(res.result)
                    $(`<table border="1" cellspacing="0" cellpadding="40" id="mytable">
                    <tr>
                        <th class="myclassname">班级</th>
                        <th class="myclassname">公寓</th>
                        <th class="myclassname">宿舍号</th>
                    </tr>
                    <tr>
                        <td class="myclassname" id="classname">${res.result.classname}</td>
                        <td class="myclassname" id="apartment">${res.result.apartment}</td>
                        <td class="myclassname" id="dormitory">${res.result.dormitory}</td>
                    </tr>
                </table>`).appendTo($("#table-body"))
                },
                error: function (err) {
                    bootoast({
                        message: '服务器请求错误！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                }
            })
        }
    </script>
</head>

<body>
<div class="container-fluid my-container">
    <!-- 头部 -->
    <ol class="breadcrumb" style="margin-top:5px; background-color: #bcc5c1;">
        <li><b id="showinstitute" style="font-size: 20px"></b></li>
        <li id="active" style="font-size: 20px;"></li>
    </ol>
    <!-- 检索框 -->
    <form class="form-inline" action="student" method="post">
        <input type="hidden" name="institute" id="institute" th:value="${session.institute}">
        <input type="hidden" name="oper" value="search">
        <div class="form-group">
            <input type="text" class="form-control" name="keyword" th:value="${session.keyword}" id="exampleInputName2"
                   placeholder="请输入关键字">
        </div>
        <button type="submit" class="btn btn-primary anniu">搜索</button>
    </form>
    <!-- 表格 -->
    <div class="panel panel-default tab">
        <div class="panel-heading cz">操作面板</div>
        <div class="panel-body tb1">
            <table class="table table-hover table-condensed">
                <thead class="th">
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>电话</th>
                    <th>专业</th>
                    <th>更多信息</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:if="${#lists.isEmpty(session.userList)}">
                    <td colspan="6">对不起库存为空</td>
                </tr>
                </tbody>
                <tbody th:if="${not #lists.isEmpty(session.userList)}">
                <tr th:each="user : ${session.userList}">
                    <td class="text" th:text="${user.userId}">193010201</td>
                    <td class="text" th:text="${user.nickName}">李灿</td>
                    <td class="text" th:text="${user.sex}">男</td>
                    <td class="text" th:text="${user.phone}">18</td>
                    <td class="text" th:text="${user.specialty}">计算机科学与技术</td>
                    <td>
                        <button type="button" data-toggle="modal" data-target="#moremessage"
                                th:onclick="|message(${user.userId})|"><i class="fa fa-align-center"></i></button>
                    </td>
                    <td class="text">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
                                th:attr="data-userid=${user.userId},data-nickname=${user.nickName},data-sex=${user.sex},data-phone=${user.phone},data-specialty=${user.specialty}">
                            编辑
                        </button>
                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal2"
                                th:attr="data-userid=${user.userId},data-specialty=${user.specialty}">删除
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 分页组件 -->
    <nav aria-label="Page navigation">
        <ul class="pagination" style="margin-bottom: 30px;margin-left: 300px;">
            <li>
                <a href="#" aria-label="Previous"
                   th:onclick="|page(${session.pageNo-1},${session.pageCount},${session.institute})|">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li><a href="#" th:onclick="|page(1,${session.pageCount},${session.institute})|">首页</a></li>
            <li><a href="#" th:onclick="|page(${session.pageNo-1},${session.pageCount},${session.institute})|">上一页</a>
            </li>
            <li><a href="#" th:onclick="|page(${session.pageNo+1},${session.pageCount},${session.institute})|">下一页</a>
            </li>
            <li><a href="#" th:onclick="|page(${session.pageCount},${session.pageCount},${session.institute})|">尾页</a>
            </li>
            <li>
                <a href="#" aria-label="Next"
                   th:onclick="|page(${session.pageNo+1},${session.pageCount},${session.institute})|">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
    <div class="footer">技术支持：计科1902你说对就队</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel"
                    style="border-left: 5px solid red;padding-left: 10px;">编辑学生信息</h4>
            </div>
            <div class="modal-body">
                <!-- 表单 -->
                <form action="student" method="post" id="myForm">
                    <input type="hidden" name="operate" value="update" id="operate">
                    <input type="hidden" class="form-control" id="userId" name="userId">
                    <div class="form-group">
                        <label for="nickName">姓<span style="color:transparent;user-select: none;">隐藏</span>名：</label>
                        <input type="text" class="form-control" name="nickName" id="nickName" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label>性<span
                                style="color:transparent;user-select: none;">隐藏</span>别：</label>
                        <div class="radio">
                            <label>
                                <input type="radio" name="sex" id="optionsRadios1" value="男">
                                男
                            </label>
                            &nbsp&nbsp
                            <label>
                                <input type="radio" name="sex" id="optionsRadios2" value="女">
                                女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="phone">电<span style="color:transparent;user-select: none;">隐藏</span>话：</label>
                        <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入电话">
                    </div>
                    <div class="form-group">
                        <label for="specialty">专<span style="color:transparent;user-select: none;">隐藏</span>业：</label>
                        <select class="form-control" name="specialty" id="specialty">
                            <option value="计算机科学与技术">计算机科学与技术</option>
                            <option value="电气工程">电气工程</option>
                            <option value="物联网">物联网</option>
                            <option value="人工智能">人工智能</option>
                            <option value="软件开发">软件开发</option>
                            <option value="会计">会计</option>
                            <option value="金融学">金融学</option>
                            <option value="财务管理">财务管理</option>
                            <option value="统计学">统计学</option>
                            <option value="审计">审计</option>
                            <option value="人力资源">人力资源</option>
                            <option value="市场营销">市场营销</option>
                            <option value="工商管理">工商管理</option>
                            <option value="行政管理">行政管理</option>
                            <option value="电子商务">电子商务</option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary" id="save-btn">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal2Label">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModal2Label2"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">温馨提示</h4>
            </div>
            <form action="student" method="post">
                <input type="hidden" name="operate" value="del">
                <div class="modal-body">
                    确定删除当前学生？
                    <input type="hidden" id="userId2" name="userId">
                    <input type="hidden" name="specialty" id="specialty1">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary" id="del-btn">确认</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="moremessage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel1"
                    style="border-left: 5px solid red;padding-left: 10px;">更多信息</h4>
            </div>
            <div class="modal-body" id="table-body">

            </div>
        </div>
    </div>
</div>
</body>
</html>